import React, { useEffect, useState } from 'react';
import { Button, Table, Switch, notification } from 'antd';
import _ from 'lodash'
import service from '../../../../api'
import './Recommend.scss'
function Recommend(props) {
    //分页
    const [pagination, setPagination] = useState({ current: 0, pageSize: 0 });
    //定义轮播图数据
    const [recommend, setRecommend] = useState([])
    //请求轮播图列表
    var getrecommend = async () => {
        var res = await service.pro.pro_showdata({ type: 'isrecommend', flag: 1 });
        setRecommend(res.data.data)
    }
    useEffect(() => {
        getrecommend()
    }, [])

    //切换状态
    var toChange = async (proid, checked, type) => {
        //type还没有确认
        var res = await service.pro.pro_updateFlag({ proid, flag: checked, type });
        if (res.data.code == 200) {
            notification.success({ message: 'flag已更改!' })
            var item = recommend.find((item) => item.proid == proid)
            if (item) {
                item[type] = 1 - item[type]
            }
            //实时更新组件状态
            var newrecommend = _.cloneDeep(recommend)
            setRecommend(newrecommend)
        }
    }

    const columns = [
        {
            title: '序号',
            key: 'number',
            render: (_, record, index) => <div>{(pagination.current - 1) * pagination.pageSize + index + 1}</div>,
        },
        {
            title: '图片',
            key: 'picture',

            render: (_, record, index) => <img src={record.img1} />,
        },
        {
            title: '名称',
            key: 'name',
            width: 200,
            render: (_, record, index) => <div>{record.proname}</div>,
        },
        {
            title: '品牌',
            key: 'brand',

            render: (_, record, index) => <div>{record.brand}</div>
        },
        {
            title: '分类',
            key: 'brand',

            render: (_, record, index) => <div>{record.category}</div>
        },
        {
            title: '原价',
            key: 'brand',

            render: (_, record, index) => <div>{record.originprice}</div>
        },
        {
            title: '折扣',
            key: 'brand',

            render: (_, record, index) => <div>{record.discount}</div>
        },
        {
            title: '销量',
            key: 'brand',

            render: (_, record, index) => <div>{record.sales}</div>
        },
        {
            title: '是否推荐',
            key: 'isrecommend',

            render: (_, record, index) => <Switch checked={record.isrecommend == 1} onChange={(checked) => { toChange(record.proid, checked, 'isrecommend') }} />,
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record, index) => <Button danger type="primary" > Delete </Button>,
        },

    ]
    //页码  
    var onPageChange = (pagination) => {

        setPagination(pagination)
    }
    //点击获取推荐商品
    var toRecommend = async () => {
        var res = await service.pro.pro_showdata({ type: 'isrecommend', flag: 1 });
        setRecommend(res.data.data)

    }
    //点击获取非推荐商品
    var toNotRecommend = async () => {
        var res = await service.pro.pro_showdata({ type: 'isrecommend', flag: 0 });
        setRecommend(res.data.data)

    }
    return (
        <div className='recommend-box'>
            <Button type="primary" onClick={toRecommend}> 推荐商品</Button> <Button type="primary" onClick={toNotRecommend}> 非推荐商品</Button>
            <Table className='table' style={{ marginTop: 20 }} columns={columns} dataSource={recommend} onChange={onPageChange} />
        </div>
    );
}

export default Recommend;